<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="auto" label-suffix="：">
    <el-form-item :label="$t('message.ymm')" prop="oldPassword">
      <el-input
        v-model="user.oldPassword"
        :placeholder="$t('message.qsr') + $t('message.ymm')"
        type="password"
      />
    </el-form-item>
    <el-form-item :label="$t('message.xmm')" prop="newPassword">
      <el-input
        v-model="user.newPassword"
        type="password"
        :placeholder="$t('message.qsrxmm8')"
      />
    </el-form-item>
    <el-form-item :label="$t('message.qrmm')" prop="confirmPassword">
      <el-input
        v-model="user.confirmPassword"
        :placeholder="$t('message.qsr') + $t('message.password')"
        type="password"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        v-preventReClick
        type="primary"
        size="mini"
        @click="submit"
      >{{ $t('message.baocun') }}</el-button>
      <el-button
        v-preventReClick
        type="danger"
        size="mini"
        @click="close"
      >{{ $t('message.gb') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { motifyPwd } from '@/api'
import i18n from '@/utils/i18n'
export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error(i18n.t('message.lcbyy')))
      } else {
        callback()
      }
    }
    return {
      test: '1test',
      user: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      // 表单校验
      rules: {
        oldPassword: [
          { required: true, message: this.$t('message.ymmbn'), trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: this.$t('message.xmmbn'), trigger: 'blur' },
          { min: 8, max: 20, message: this.$t('message.zfcd'), trigger: 'blur' },
          {
            pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,20}$/,
            message: this.$t('message.xbhdxszf'),
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          { required: true, message: this.$t('message.qrmmbn'), trigger: 'blur' },
          { required: true, validator: equalToPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          motifyPwd({
            param: {
              userId: sessionStorage.getItem('userId'),
              oldpassword: this.user.oldPassword,
              newpassword: this.user.confirmPassword
            }
          })
            .then((res) => {
              if (res.errorCode !== '000000') return
              this.logout()
            })
            .catch(() => { })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    close() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({ path: '/' })
    },
    async logout() {
      this.$message.success(this.$t('message.xgcg'))
      const shopId = localStorage.getItem('shopId')
      // const venueId = sessionStorage.getItem('venueId')
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?shopId=` + shopId)
    }
  }
}
</script>
